<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>信用卡业务管理系统</title>
	<link rel="stylesheet" type="text/css" th:href="@{/css/common.css}"/>
	<script th:src="@{/js/jquery-1.11.1.min.js}" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
        $(function(){
            $(".login_out li:last").css("padding","0px").css("border","none");

            /*导航效果*/
            $('.inactive').click(function(){
                if($(this).siblings('ul').css('display')=='none'){
                    $(this).parent('li').siblings('li').removeClass('inactives');
                    $(this).addClass('inactives');
                    $(this).siblings('ul').slideDown(100).children('li');
                    if($(this).parents('li').siblings('li').children('ul').css('display')=='block'){
                        $(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');
                        $(this).parents('li').siblings('li').children('ul').slideUp(100);
                    }
                }else{
                    //控制自身变成+号
                    $(this).removeClass('inactives');
                    //控制自身菜单下子菜单隐藏
                    $(this).siblings('ul').slideUp(100);
                    //控制自身子菜单变成+号
                    $(this).siblings('ul').children('li').children('ul').parent('li').children('a').addClass('inactives');
                    //控制自身菜单下子菜单隐藏
                    $(this).siblings('ul').children('li').children('ul').slideUp(100);
                    //控制同级菜单只保持一个是展开的（-号显示）
                    $(this).siblings('ul').children('li').children('a').removeClass('inactives');
                };
            });
            $(".list>ul>li>ul>li a").each(function(index, element) {
                $(this).click(function() {
                    $(".list>ul>li>ul>li a").each(function(index, element) {
                        $(this).removeClass("submenu_crt");
                    });
                    /*alert($(".list>ul>li").length);*/
                    $(".list>ul>li").each(function(index,element){
                        /*alert(index);*/
                        $(".list>ul>li:eq("+index+")").removeClass("submenu_crt");
                    });
                    $(this).addClass("submenu_crt");
                });
            });
            $(".list>ul>li a").each(function(index,element){
                $(this).click(function(){
                    $("ul",this).css("display","block");
                    $(".list>ul>li a").removeClass("submenu_crt");
                    $(this).addClass("submenu_crt");
                });
            });

            /*表格隔行变色*/
            $(".stripe tr").mouseover(function(){
                //如果鼠标移到class为stripe的表格的tr上时，执行函数
                $(this).addClass("over");}).mouseout(function(){
                //给这行添加class值为over，并且当鼠标一出该行时执行函数
                $(this).removeClass("over");}) //移除该行的class
            $(".stripe tr:even").addClass("alt");

            /*选中删除*/
            var sta=$(".check_b");
            var str=$(".check");
            str.hide();  // 默认隐藏状态
            sta.click(function(){
                $(this).hide();
                $(this).siblings(str).show();// 改变显隐状态
            })
            str.click(function(){
                $(this).hide();
                $(this).siblings(sta).show();
            });

        });
	</script>
</head>
<body>

<div id="mian">
	<div class="main">
		<div class="left">
			<div class="list">
				<ul class="yiji">
					<li><a class="inactive"><img th:src="@{/img/list_ico1.png}"/>用户系统管理</a>
						<ul style="display: none">
							<li><a th:href="@{/cardlook}">开卡查看</a></li>
							<li><a href="#">客户管理</a></li>
							<li><a href="#">员工管理</a></li>
							<li><a href="#">测评员管理</a></li>
						</ul>
					</li>
					<li><a href="#"><img th:src="@{/img/list_ico2.png}"/>财务系统管理</a></li>
					<li><a href="#"><img th:src="@{/img/list_ico3.png}"/>积分系统管理</a></li>
					<li><a href="#"><img th:src="@{/img/list_ico4.png}"/>后台系统管理</a></li>
					<li><a href="#"><img th:src="@{/img/list_ico5.png}"/>积分系统系统</a></li>
			</div>
		</div>
		<div class="right">
			<p>
				<img src="/img/bank_backg.jpg"  width="900" height="600"/>
			</p>


		</div>
	</div>
</div>
</body>
</html>